<template>
  <div class="header">
    <i
      class="iconfont icon-xitongfanhui"
      @click.native="$router.push('/home/singUp')"
    ></i>
    <van-search
      v-model="inSearch"
      style="flex: 1"
      shape="round"
      show-action
      placeholder="请搜索驾校"
      @search="onSearch"
      @update:model-value="onChange"
    >
      <template #action>
        <van-button
          hairline
          size="small"
          :round="true"
          :block="true"
          plain
          @click="onSearch"
          type="primary"
          >搜索</van-button
        >
      </template>
    </van-search>
  </div>
  <!-- 模糊查询 搜索提示 -->
  <ul v-show="isShow" class="seachSelect">
    <li
      @click="selectSchool(i)"
      v-for="(item, i) in SearchList"
      :key="item.school_id"
    >
      <i class="iconfont icon-xuexiao_xuexiaoxinxi iconschool"></i
      >{{ item.school_name }}
    </li>
  </ul>

  <!-- 搜索驾校结果 -->
  <div class="searchResult">
    <van-list
      :immediate-check="false"
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <JiaxiaoItem
        v-for="item in searchResult"
        :items="item"
        :key="item.school_name"
      ></JiaxiaoItem>
      <!-- 未搜索到驾校提示 -->
      <van-empty
        v-show="!searched && searchResult.length == 0"
        image="search"
        description="暂无数据"
      />
    </van-list>
  </div>

  <div v-show="searched" class="main">
    <h3>热门榜单</h3>
    <!--  //#ef4749 -->
    <div class="Toplist">
      <div>
        <i class="iconfont icon-redu reduColor"></i>
        热门驾校
        <button>更多 &gt;</button>
      </div>
      <ol>
        <li v-for="(item, i) in SchoolList" :key="item.school_id">
          <div>
            <i>{{ i + 1 }}</i>
            <span>{{ item.school_name }}</span>
            <b>{{ item.school_score }}</b>
          </div>
          <span>{{ item.distance.toFixed(1) }} km</span>
        </li>
      </ol>
    </div>
  </div>
</template>

<script setup>
import httpApi from "@/http";
import JiaxiaoItem from "@/components/JiaxiaoItem.vue";
import { ref, reactive, onMounted } from "vue";
import { useStore } from "vuex";
const store = useStore(); // 该方法用于返回store 实例
console.log(store); // store 实例对象
let user_lng = store.state.userLocation[0];
let user_lat = store.state.userLocation[1];
const SchoolList = reactive([]);
const inSearch = ref("");
const SearchList = reactive([]); //存储模糊搜索的 的列表数据
let loading = ref(false);
let finished = ref(false);
let isShow = ref(false);
let requestTimer = ref(null);
const onChange = () => {
  if (inSearch.value == "") {
    SearchList.splice(0); //输入框没有值的时候 清除提示的数据,达到不显示的效果
    return;
  }
  isShow.value = true; //显示搜索选择列表
  /* 实现防抖 --- 只有输入内容后超过2秒不再有后续输入才发起请求 */
  if (requestTimer.value) {
    clearTimeout(requestTimer.value);
    requestTimer.value = null;
  }

  requestTimer.value = setTimeout(() => {
    let params = {
      page: 1,
      pagesize: 10,
      schoolName: inSearch.value,
      user_lng,
      user_lat,
    };
    httpApi.schoolApi.searchSchool(params).then((res) => {
      SearchList.splice(0, SearchList.length, ...res.data.data.result);
    });
  }, 1000);
};
/* 点击搜索的提示驾校, 回填驾校名称到输入框 */
const selectSchool = (i) => {
  //把学校名字回填到搜索框并
  inSearch.value = SearchList[i].school_name;
  isShow.value = false; //选择后 关闭搜索选择列表
  onSearch(); //触发搜索
};
const searchResult = reactive([]);
let searched = ref(true); //是否已点搜索,搜索后,true显示 false隐藏排行榜及标签的

const onSearch = () => {
  if (inSearch.value == '') {
    return;
  }
  searchResult.splice(0)
  isShow.value = false; //点击搜索后 关闭搜索选择列表
  searched.value = false; //隐藏排行榜及标签
  searchResultHttp()
 
};
const searchResultHttp=()=>{
  let page = Math.floor(searchResult.length / 8) + 1;
  let params = {
    page: page,
    pagesize: 8,
    schoolName: inSearch.value,
    user_lng,
    user_lat,
  };
  console.log(params);
  httpApi.schoolApi.searchSchool(params).then((res) => {
    console.log("查询结果", res);
    searchResult.push(...res.data.data.result);
    /* 据更新完毕后，将 loading 设置成 false */
    loading.value = false;
    /* 已加载到前端页面上的数据量(list数组长度)==驾校数据总量 */
    finished.value = false; //先加个保险,保证判断之前为false
    if (searchResult.length >= res.data.data.total) {
      finished.value = true; //没有更多数据了,finished 已完成  true
    }
  });
}

const onLoad = () => {
  console.log("触底加载");
  searchResultHttp()
};
/* 热门排行榜 */
function schoolScoreHttp() {
  let params = {
    page: 1,
    pagesize: 10,
    user_lng: user_lng,
    user_lat: user_lat,
  };
  httpApi.schoolApi.schoolScoreSort(params).then((res) => {
    console.log("口碑优先", res);
    SchoolList.splice(0, SchoolList.length, ...res.data.data.result);
  });
}

onMounted(() => {
  schoolScoreHttp();
});
</script>

<style lang="scss" scoped>
.header {
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  line-height: 50px;
  padding: 10px 8px;
  position: relative;
  > i {
    font-size: 24px;
    display: inline-block;
    padding-right: 10px;
  }
}
/* 模糊查询弹出 */
.seachSelect {
  width: 100%;
  position: absolute;
  background-color: #fff;
  z-index: 600;
  width: 100%;
  color: black;
  padding: 0px 10px;
  border-bottom-left-radius: 8px;
  border-bottom-left-radius: 8px;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5);

  > li {
    line-height: 30px;
    font-size: 18px;

    > .iconschool {
      color: var(--color-blue-400);
      font-size: 18px;
      margin-right: 0.7em;
    }
  }
}
/* 模糊查询结果 */
.searchResult {
  padding: 0 10px;
}
.main {
  width: 90%;
  margin: 0 auto;
  /* 为你推荐 */
  h3 {
    font-size: 16px;
    padding: 10px 0;
  }
  /* 热门榜单 */
  .Toplist {
    border-radius: 10px;
    background-color: white;
    box-shadow: 0px 0px 2px 1px rgba(241, 6, 6, 0.5) inset;
    padding: 10px;

    > div {
      font-size: 18px;
      color: #ef4749;
      .reduColor {
        color: #ef4749;
        font-size: 20px;
        margin-right: 5px;
      }
      > b {
        color: #ff8556;
        display: inline-block;
      }
      > button {
        font-size: 12px;
        float: right;
      }
    }
    /* 排行列表 */
    ol {
      li {
        display: flex;
        line-height: 30px;
        align-items: center;
        font-size: 14px;
        justify-content: space-between;
        border-bottom: 1px solid #eee;

        > div {
          display: flex;
          align-items: center;
          > i {
            display: inline-block;
            width: 18px;
            height: 18px;
            line-height: 18px;
            margin-top: 1px;
            font-size: 12px;
            text-align: center;
            color: #fff;
            background: #ef4749;
            margin-right: 5px;
          }
          > span {
            display: block;
            margin-right: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          > b {
            color: #ff8556;
            font-size: 12px;
          }
        }
        > span {
          font-size: 0.4rem;
          color: #584a4a;
          margin-left: auto;
        }
      }
    }
  }
}
</style>
